<template>
    <div class="headerBar overflow-clear">
      <div class="float-left"><h1>教学管理系统</h1></div>
      <div class="float-right header-right">
        <span>welcome:</span>
        <router-link to="/ChangePassword" class="avatar-icon"></router-link>
        <router-link to="/ChangePassword">change the password</router-link>
      </div>
    </div>
</template>
<style>
    /* 如果设置font-size的话记得把px换成em */
    .headerBar{
      height: 60px;
      background: #1f2d3d;
      color: #FFF;
    }
    .headerBar a{
      color: #FFF;
    }
    .headerBar h1{
      line-height: 60px;
      margin-left: 30px;
    }
    .header-right{
      margin-right: 25px;
    }
    .avatar-icon{
      margin-top:10px;
      margin-right:10px;
      margin-left: 10px;
      height: 40px;
      width: 40px;
      display: inline-block;
      border: 1px solid #FFF;
      border-radius: 50%;
      background:url("./avatarBg.jpg") no-repeat;
      background-size: 100% 100%;
    }
</style>
<script>

    export default{
        name: 'headerBar',
        data(){
            return{

            }
        },
        components:{

        }
    }
</script>
